<template>
  <ul>
    <li v-for="product in products" :key="product.id">
      <span>{{ product.title }}--{{ product.price }}</span>
      <button :disabled="!product.inventory" @click="addProductToCart(product)">
        加入购物车
      </button>
    </li>
  </ul>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  created() {
    this.$store.dispatch("products/getAllProducts");
  },
  // mapState
  computed: mapState({
    products: (state) => state.products.all,
  }),
  // 等价于 上
  /* computed: {
    products(){
      return this.$store.state.products.all
    }
  }, */
  methods: mapActions("cart", ["addProductToCart"]),
  /* methods: {
    addProductToCart(product) {
      this.$store.dispatch('cart/addProductToCart', product)
    },
  }, */
};
</script>

<style scoped>
ul {
  width: 300px;
  color: #ff5500;
}
li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
</style>
